/** css 是否支持 dvh 单位 */
const isDvhSupported = !!window.CSS?.supports?.('height', '100dvh');

function setCssVar(name: string, value: string) {
  document.documentElement.style.setProperty(`--${name}`, value);
}

/**
 * 设置动态视口尺寸
 */
function setDynamicViewport() {
  // dfvh: dynamic full viewport height
  setCssVar('dfvh', `${window.innerHeight}px`);
  // dfvw: dynamic full viewport width
  setCssVar('dfvw', `${window.innerWidth}px`);
}

/**
 * 获取滚动条的宽度
 */
function getScrollbarWidth() {
  // 创建一个临时的 div 元素
  const div = document.createElement('div');
  // 设置一些样式
  div.style.visibility = 'hidden';
  div.style.overflow = 'scroll'; // 强制出现滚动条
  div.style.width = '100px'; // 设置宽度
  div.style.height = '100px'; // 设置高度
  // 将 div 添加到 body
  document.body.appendChild(div);

  // 获取滚动条的宽度
  const scrollbarWidth = div.offsetWidth - div.clientWidth;

  // 移除临时的 div
  document.body.removeChild(div);

  return scrollbarWidth;
}

setCssVar('safe-top', 'env(safe-area-inset-top, 20px)');
setCssVar('safe-bottom', 'env(safe-area-inset-bottom, 20px)');
setTimeout(() => setCssVar('scrollbar-width', `${getScrollbarWidth()}px`), 500);

if (isDvhSupported) {
  setCssVar('dfvh', '100dvh');
  setCssVar('dfvw', '100dvw');
}
else {
  setDynamicViewport();
  window.addEventListener('resize', setDynamicViewport);
}
